<template>
	<div>
		<a-row :gutter="16">
			<a-col :span="18">
				<div class="fl">
					<a-card title="RPA" style="width: 32%; min-width: 345px">
						<div class="RPA">
							<div
								class="top"
								@click="RPA()"
								style="cursor: pointer"
							>
								<a-progress
									type="circle"
									:percent="rpaTas"
									:format="() => ''"
									width="150px"
								/>
								<img
									src="@/assets/homePage/Rpa.png"
									class="imga"
									alt=""
								/>
								<div class="tops">
									{{ this.rpa.Totals }}
								</div>
								<div class="topz">
									{{ $t('dco.portal.sum') }}
								</div>
							</div>
							<div class="cplumn_150">
								<div class="RPA_s">
									<div class="w40">
										<div class="ee9"></div>
									</div>
									<div class="w70">{{ $t('draft') }}</div>
									<div class="cc w40">
										{{ this.rpa.Draft }}
									</div>
								</div>
								<div class="RPA_s">
									<div class="w40">
										<div class="ee9"></div>
									</div>
									<div class="w70">{{ $t('user.v156') }}</div>
									<div class="green w40">
										{{ this.rpa.Submitted }}
									</div>
								</div>
							</div>
						</div>
					</a-card>
					<a-card title="DPIA" style="width: 32%; min-width: 345px">
						<div class="RPA">
							<div
								class="top"
								@click="DPIA()"
								style="cursor: pointer"
							>
								<a-progress
									type="circle"
									:percent="dpiaTas"
									:format="() => ''"
									width="150px"
								/>
								<img
									src="@/assets/homePage/Dpia.png"
									class="imga"
									alt=""
								/>
								<div class="tops">
									{{ this.dpia.Totals }}
								</div>
								<div class="topz">
									{{ $t('dco.portal.sum') }}
								</div>
							</div>
							<div class="cplumn_150">
								<div class="RPA_s">
									<div class="w40">
										<div class="ee9"></div>
									</div>
									<div class="w70">{{ $t('draft') }}</div>
									<div class="cc w40">
										{{ this.dpia.Draft }}
									</div>
								</div>
								<div class="RPA_s">
									<div class="w40">
										<div class="ee9"></div>
									</div>
									<div class="w70">{{ $t('submitted') }}</div>
									<div class="ee w40">
										{{ this.dpia.Submitted }}
									</div>
								</div>
								<div class="RPA_s">
									<div class="w40">
										<div class="ee9"></div>
									</div>
									<div class="w70">
										{{
											$t(
												'user.verification-code.required1115661105716'
											)
										}}
									</div>
									<div class="ef w40">
										{{ this.dpia.InProgress }}
									</div>
								</div>
								<div class="RPA_s">
									<div class="w40">
										<div class="ee9"></div>
									</div>
									<div class="w70">
										{{
											$t(
												'user.verification-code.required111566146'
											)
										}}
									</div>
									<div class="green w40">
										{{ this.dpia.Completed }}
									</div>
								</div>
								<div class="RPA_s">
									<div class="w40">
										<div class="ee9"></div>
									</div>
									<div class="w70">
										{{
											$t(
												'user.verification-code.required11156614611'
											)
										}}
									</div>
									<div class="ef w40">
										{{ this.dpia.Stop }}
									</div>
								</div>
							</div>
						</div>
					</a-card>
					<a-card title="TASK" style="width: 32%; min-width: 345px">
						<div class="RPA">
							<div
								class="top"
								@click="RISK()"
								style="cursor: pointer"
							>
								<a-progress
									type="circle"
									:percent="riskTas"
									:format="() => ''"
									width="150px"
								/>
								<img
									src="@/assets/homePage/Risk.png"
									class="imga"
									alt=""
								/>
								<div class="tops">
									{{ this.risk.Totals }}
								</div>
								<div class="topz">
									{{ $t('dco.portal.sum') }}
								</div>
							</div>
							<div class="cplumn_150">
								<div class="RPA_s">
									<div class="w40">
										<div class="ee9"></div>
									</div>
									<div class="w70">{{ $t('draft') }}</div>
									<div class="cc w40">
										{{ this.risk.Draft }}
									</div>
								</div>
								<div class="RPA_s">
									<div class="w40">
										<div class="ee9"></div>
									</div>
									<div class="w70">{{ $t('submitted') }}</div>
									<div class="ee w40">
										{{ this.risk.Submitted }}
									</div>
								</div>
                                <div class="RPA_s">
									<div class="w40">
										<div class="ee9"></div>
									</div>
									<div class="w70">
										{{
											$t(
												'user.verification-code.required1115661105716'
											)
										}}
									</div>
									<div class="ef w40">
										{{ this.risk.InProgress }}
									</div>
								</div>
								<div class="RPA_s">
									<div class="w40">
										<div class="ee9"></div>
									</div>
									<div class="w70">
										{{
											$t(
												'user.verification-code.required111566146'
											)
										}}
									</div>
									<div class="green w40">
										{{ this.risk.Completed }}
									</div>
								</div>
								<div class="RPA_s">
									<div class="w40">
										<div class="ee9"></div>
									</div>
									<div class="w70">{{ $t('user.v173') }}</div>
									<div class="ef w40">
										{{ this.risk.ToBeEdited }}
									</div>
								</div>
							</div>
						</div>
					</a-card>
				</div>
				<div class="fl">
					<a-card :title="$t('Please.DPIA')" style="width: 100%">
						<template #extra
							><div @click="Domain()">
								<a-icon
									class="zwe"
									type="ellipsis"
									style="margin: 0 6px"
								/></div
						></template>
						<div class="echart" id="byrsBarss"></div>
					</a-card>
				</div>
				<div class="fl">
					<a-card :title="$t('Please.Mt')" style="width: 32%">
						<div class="echartbold" id="byrspie"></div>
					</a-card>
					<a-card :title="$t('Please.Mt7')" style="width: 66%">
						<div class="echartbold" id="byrsBar1"></div>
					</a-card>
				</div>
			</a-col>

			<a-col :span="6">
				<a-card :title="$t('Please.mr')">
					<div
						style="
							border: 1px solid #ccc;
							border-radius: 4px;
							margin-bottom: 15px;
						"
					>
						<a-calendar
							:fullscreen="false"
							@panelChange="onPanelChange"
						/>
					</div>
					<div
						style="
							border: 1px solid #ccc;
							padding: 7px;
							border-radius: 4px;
						"
					>
						<div
							style="
								display: flex;
								justify-content: space-between;
								font-size: 18px;
							"
						>
							<div>{{$t(`Operating_record`)}}</div>
							<div>
								<a-icon
									style="margin: 0 6px; cursor: pointer"
									type="plus-square"
									@click="New('0', '', '', '')"
								></a-icon>
								<a-icon
									type="unordered-list"
									style="cursor: pointer"
									@click="Operate()"
								></a-icon>
							</div>
						</div>
						<div style="height: 674px">
							<div
								class="Kuen"
								v-for="(item, index) in listData"
								:key="index"
							>
								<div class="she_Bet">
									<div>{{ item.OptDescribe }}</div>
									<div>
										<a-button
											v-if="item.OptStatus == 1"
											type="primary"
											size="small"
										>
											{{$t(`Operating_process`)}}
										</a-button>
										<a-button
											v-else-if="item.OptStatus == 2"
											type="primary"
											size="small"
										>
											{{$t(`Operating_resolved`)}}
										</a-button>
										<a-button
											v-else
											type="primary"
											size="small"
										>
											{{$t(`Operating_closed`)}}
										</a-button>
									</div>
								</div>
								<div style="margin: 8px 0">
									<a-icon type="exclamation-circle" />
									{{ item.OptCreateUserId }}
								</div>
								<div class="she_start">
									<div>
										<a-icon type="message" />
									</div>
									<div
										style="
											width: 100%;
											padding: 1px 6px;
											background: #ccc3;
											margin: 0px 2px;
										"
									>
										<div>
											<span>{{$t(`Operating_processor`)}}:</span>
											<span>{{
												item.OptProcessUserId
											}}</span>
										</div>
										<div>
											<span>{{$t(`Operating_time`)}}:</span>
											<span>{{
												item.OptUpdatetime
											}}</span>
										</div>
										<div>
											<span>{{$t(`Operating_remark`)}}:</span>
											<span
												style="
													font-size: 14px;
													height: 68px;
													display: block;
													overflow: auto;
												"
											>
												{{ item.OptProcessDescribe }}
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
                        <div style="display: flex; justify-content: flex-end">
						<a-pagination
							v-model="pagination.current"
							size="small"
							:total="pagination.total"
							show-less-items
							defaultPageSize="3"
							@change="onPagination()"
							hideOnSinglePage
						/>
					</div>
					</div>
					<!-- <div :style="{ width: '300px', height: '700px' }"></div> -->
				</a-card>
			</a-col>
		</a-row>
		<NewOperation
			:mode="mode"
			:riskId="riskId"
			:editId="editId"
			ref="NewOperation"
			@getList="getList"
			@succeed="getList"
		>
		</NewOperation>
	</div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
import { statisticalData, optrecord } from '@/api/dpia/form'
import NewOperation from './Domain/NewOperation.vue'
import moment from 'moment'
import { Calendar as ACalendar } from 'ant-design-vue'
export default {
	name: 'DashBoard',
	components: {
		NewOperation,
		'a-calendar': ACalendar,
	},
	data() {
		return {
			dataddd: [],
			rpa: {
				Completed: 0,
				Draft: 0, // 草稿
				Submitted: 0, // 已生效
				Totals: 0, // 总数
			},
			dpia: {
				Completed: 0, // 已完成
				Draft: 0, // 草稿
				InProgress: 0, // 流程中
				Return: 0,
				Stop: 0, // 已终止
				Submitted: 0, // 已提交
				Totals: 0, // 总数
			},
			risk: {
				Completed: 0, // 已完成
				Draft: 0, // 草稿
				InProgress: 0,
				Submitted: 0, // 已提交
				ToBeEdited: 0, // 待编辑
				Totals: 0, // 总数
			},
			dpiaDoman: [],
            pvStat:[],
			rpaTas: 1,
			dpiaTas: 1,
			riskTas: 1,
			//每日运营
			pagination: {
				current: 1, //当前页
				pageSize: 3, //每页条数
				total: 0, //总条数
				showQuickJumper: true,
				hideOnSinglePage: true,
			},
			listData: [],
			current: 2,
			//新增
			ModalText: 'Content of the modal',
			visible: false,
			confirmLoading: false,
			riskId: 0,
			editId: 0,
			//日历
		}
	},
	mounted() {
		const nowLang = localStorage.getItem('lang').includes('zh-EN')
		if (nowLang) {
			this.lang = 'zh-EN'
		} else {
			this.lang = 'zh-CN'
		}
		this.init()
	},
	methods: {
		// Rpa
		async getRPA() {
			const { data } = await statisticalData({})
			// 解构赋值
			const { rpa, dpia, risk, dpiaDoman,pvStat } = data
			this.rpa = rpa
			this.rpaTas = (rpa.Submitted / rpa.Totals.toFixed(2)) * 100
			this.dpia = dpia
			this.dpiaTas = (dpia.Completed / dpia.Totals.toFixed(2)) * 100
			this.risk = risk
			this.riskTas = (risk.Completed / risk.Totals.toFixed(2)) * 100
			this.dpiaDoman = dpiaDoman
			this.pvStat = pvStat
			this.getByrsEcharts(dpiaDoman)
			this.getTrafficEcharts(pvStat)
		},
		//各Domian统计
		async getByrsEcharts(dpiaDoman) {
			const option = {
				legend: {},
				tooltip: {},
				color: ['#87cefa', '#6495ed', '#1e90ff', '#6699FF'],
				dataset: {
					source: dpiaDoman,
				},
				xAxis: { type: 'category' },
				yAxis: {},
				series: [
					{ type: 'bar' },
					{ type: 'bar' },
					{ type: 'bar' },
					{ type: 'bar' },
				],
			}
			const byrsBar = echarts.init(document.getElementById('byrsBarss')) // 图标初始化
			byrsBar.setOption(option) // 渲染页面
			// 随着屏幕大小调节图表
			window.addEventListener('resize', () => {
				byrsBar.resize()
			})
			byrsBar.on('click', async (params) => {
				// console.log(params)
				// const states = params.data.statesType
				// console.log(states)
				// this.listLoading = true
				// this.queryForm = {
				// 	...this.queryForm,
				// 	DpiaStatus: states,
				// }
				// const { data } = await dcoDataList({
				// 	...{ page: 1, pageSize: 10, userType: 1 },
				// 	...this.queryForm,
				// })
				// // 解构赋值
				// const { Page, PageSize, Total, Lists } = data
				// // 给table赋值
				// this.listData = Lists || []
				// // 给分页数据赋值
				// this.pagination = {
				// 	current: Page,
				// 	pageSize: PageSize,
				// 	total: Total,
				// }
				// setTimeout(() => {
				// 	this.listLoading = false
				// }, 600)
			})
		},
		//在线用户
		async getOnlineEcharts() {
			// const statesType = [2, 3, 6, 4]
			// const seriesData = data.map((value, index) => {
			// 	return {
			// 		value: value,
			// 		statesType: statesType[index],
			// 	}
			// })
			// const option = {
			// 	tooltip: {
			// 		trigger: 'item',
			// 	},
			// 	legend: {
			// 		top: '5%',
			// 		left: 'center',
			// 	},
			// 	color: ['#87cefa', '#6495ed', '#1e90ff', '#6699FF'],
			// 	series: [
			// 		{
			// 			name: 'Access From',
			// 			type: 'pie',
			// 			radius: ['40%', '70%'],
			// 			avoidLabelOverlap: false,
			// 			itemStyle: {
			// 				borderRadius: 10,
			// 				borderColor: '#fff',
			// 				borderWidth: 2,
			// 			},
			// 			label: {
			// 				show: false,
			// 				position: 'center',
			// 			},
			// 			emphasis: {
			// 				label: {
			// 					show: true,
			// 					fontSize: 14,
			// 					fontWeight: 'bold',
			// 				},
			// 			},
			// 			labelLine: {
			// 				show: false,
			// 			},
			// 			data: [
			// 				{ value: 1048, name: 'Search Engine' },
			// 				{ value: 735, name: 'Direct' },
			// 				{ value: 580, name: 'Email' },
			// 				{ value: 484, name: 'Union Ads' },
			// 				{ value: 300, name: 'Video Ads' },
			// 			],
			// 		},
			// 	],
			// }
			// const byrspie = echarts.init(document.getElementById('byrspie')) // 图标初始化
			// byrspie.setOption(option) // 渲染页面
			// // 随着屏幕大小调节图表
			// window.addEventListener('resize', () => {
			// 	byrspie.resize()
			// })
			// byrspie.on('click', async (params) => {
			// 	// console.log(params)
			// 	// const states = params.data.statesType
			// 	// console.log(states)
			// 	// this.listLoading = true
			// 	// this.queryForm = {
			// 	// 	...this.queryForm,
			// 	// 	DpiaStatus: states,
			// 	// }
			// 	// const { data } = await dcoDataList({
			// 	// 	...{ page: 1, pageSize: 10, userType: 1 },
			// 	// 	...this.queryForm,
			// 	// })
			// 	// // 解构赋值
			// 	// const { Page, PageSize, Total, Lists } = data
			// 	// // 给table赋值
			// 	// this.listData = Lists || []
			// 	// // 给分页数据赋值
			// 	// this.pagination = {
			// 	// 	current: Page,
			// 	// 	pageSize: PageSize,
			// 	// 	total: Total,
			// 	// }
			// 	// setTimeout(() => {
			// 	// 	this.listLoading = false
			// 	// }, 600)
			// })
		},
		//访问量统计
		async getTrafficEcharts(pvStat) {
			let keys = Object.keys(pvStat)
			let values = Object.values(pvStat)
			const option = {
				legend: {},
				tooltip: {},
				color: ['#1e90ff', '#6699FF'],
				xAxis: {
					type: 'category',
					data: keys,
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						data: values,
						type: 'bar',
					},
				],
			}
			const byrsBar1 = echarts.init(document.getElementById('byrsBar1')) // 图标初始化
			byrsBar1.setOption(option) // 渲染页面
			// 随着屏幕大小调节图表
			window.addEventListener('resize', () => {
				byrsBar1.resize()
			})
			byrsBar1.on('click', async (params) => {
				// console.log(params)
				// const states = params.data.statesType
				// console.log(states)
				// this.listLoading = true
				// this.queryForm = {
				// 	...this.queryForm,
				// 	DpiaStatus: states,
				// }
				// const { data } = await dcoDataList({
				// 	...{ page: 1, pageSize: 10, userType: 1 },
				// 	...this.queryForm,
				// })
				// // 解构赋值
				// const { Page, PageSize, Total, Lists } = data
				// // 给table赋值
				// this.listData = Lists || []
				// // 给分页数据赋值
				// this.pagination = {
				// 	current: Page,
				// 	pageSize: PageSize,
				// 	total: Total,
				// }
				// setTimeout(() => {
				// 	this.listLoading = false
				// }, 600)
			})
		},
		async optrecordlist() {
			const { data } = await optrecord({
				...{ page: 1, pageSize: 3 },
			})
			// 解构赋值
			const { Page, PageSize, Total, Lists } = data
			// 给table赋值
			this.listData = Lists || []
			console.log(this.listData)
			// 给分页数据赋值
			this.pagination = {
				current: Page,
				pageSize: PageSize,
				total: Total,
			}
		},
		async init() {
			this.getRPA()
            this.optrecordlist()
			// this.getByrsEcharts()
            // this.getTrafficEcharts()
		},
		Domain() {
			this.$router.push({
				path: '/DashBoard/Domain',
				query: {},
			})
		},
		RPA() {
			this.$router.push({
				path: '/rpa',
				query: {},
			})
		},
		DPIA() {
			this.$router.push({
				path: '/dpia',
				query: {},
			})
		},
		RISK() {
			this.$router.push({
				path: '/fengxianguanli',
				query: {},
			})
		},
		Operate() {
			this.$router.push({
				path: '/DashBoard/operate',
				query: {},
			})
		},
		//新增弹框修改按钮
		async New(state, editId, mode, record) {
			if (state === '0') {
				//  console.log(data.ActionId);
				this.$refs.NewOperation.openAction(state, editId)
			} else {
				//编辑
			}
		},
		async onPagination(pages) {
			const { current, pageSize } = this.pagination
			const { data } = await optrecord({
				...{ page: current, pageSize: 3 },
			})
			// 解构赋值
			const { Page, PageSize, Total, Lists } = data
			// 给table赋值
			this.listData = Lists || []
			console.log(this.listData)
			// 给分页数据赋值
			this.pagination = {
				current: Page,
				pageSize: PageSize,
				total: Total,
			}
		},
		//日历
		onPanelChange(value, mode) {
			console.log(value, mode, 11)
		},
	},
}
</script>
<style lang="less" scoped>
.fl {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24px;
}

.echart {
	width: 100%;
	height: 350px;
	overflow: auto;
}

.echartbold {
	width: 100%;
	height: 350px;
	overflow: auto;
}

.RPA {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.RPA_s {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.cplumn_150 {
	width: 100%;
	height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.green {
	color: green;
}

.ee {
	color: #118ee9;
}

.ef {
	color: #ef6b25;
}

.ef {
	color: #ff0404;
}

.cc {
	color: #ccc;
}

.ee9 {
	width: 10px;
	height: 10px;
	border: 2px solid #268ee9;
	border-radius: 45px;
	margin-left: 80%;
	display: block;
}
.w30 {
	width: 40px;
}
.w70 {
	width: 70px;
}
.w40 {
	width: 40px;
}
.top {
	position: relative;
}

.tops {
	position: absolute;
	top: 46%;
	width: 150px;
	text-align: center;
	font-size: 20px;
	color: #268ee9;
}

.topz {
	position: absolute;
	top: 69%;
	width: 150px;
	text-align: center;
}
.zwe {
	font-size: 19px;
	border: 2px solid #ccc;
	border-radius: 19px;
	width: 33px;
	cursor: pointer;
}
.imga {
	width: 50px;
	display: inline-block;
	cursor: pointer;
	left: 50%;
	position: absolute;
	top: 12%;
	margin-left: -25px;
}
.she_Bet {
	display: flex;
	justify-content: space-between;
}
.she_start {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.Kuen {
	padding: 10px;
	margin: 13px;
	border: 1px solid #ccc;
	border-radius: 3px;
}
</style>
